<template>
  <div class="shop-container">
    <!-- <van-nav-bar
      class="shop-nav"
      title="个人店铺列表"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    /> -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <shop-item v-for="item in list" :key="item.shop_id" :shop="item" />
    </van-list>
    <div class="addBtn">
      <van-button round type="primary" block to="/shop-info">添加店铺</van-button>
    </div>
  </div>
</template>

<script>
import ShopItem from './shop-item'
import { getShopList } from '@/api/shop'
export default {
  name: 'ShopList',
  components: {
    ShopItem
  },
  props: {
    audit_state: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 5
    }
  },
  created() {},
  mounted() {},
  methods: {
    async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const { data: res } = await getShopList({
        params: {
          audit_state: this.audit_state,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      })
      const shopList = res.data.rows
      this.list.push(...shopList)

      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (shopList.length === 0) {
        this.finished = true
      } else {
        this.pageNum++
      }
    }
  }
}
</script>

<style scoped lang="less">
.shop-container {
  /deep/.shop-nav {
    background: #008bfa;
    .van-nav-bar__text,
    .van-nav-bar__title,
    .van-icon {
      color: #fff;
    }
  }
  .submitBtn {
    margin-bottom: 20px;
  }
  .addBtn {
    padding: 10px 20px;
  }
}
</style>
